<template>
	<view class="container">
		<button type="primary" @click="showContacts" class="show-btn">显示联系人</button>
		
		<view v-if="showData" class="contacts-table">
			<view class="table-header">
				<view class="header-cell name-cell">姓名</view>
				<view class="header-cell phone-cell">电话号码</view>
			</view>
			
			<view class="table-body">
				<view v-for="(contact, index) in data_book" :key="index" class="table-row">
					<view class="body-cell name-cell">{{contact.name}}</view>
					<view class="body-cell phone-cell">
						<view v-for="(phone, pIndex) in contact.phones" :key="pIndex" class="phone-item">
							{{phone}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Contacts from "@/components/Contacts.js";//引入获取联系人js
	const $contacts = new Contacts();
	export default {
		data() {
			return {
				showData: false,
				data_book: [
					// {
					// 	"name": "许文强",
					// 	"phones": ["183 8888 8888"]
					// },
					// {
					// 	"name": "张全蛋",
					// 	"phones": ["133 3333 3333"]
					// },
					// {
					// 	"name": "蔡文姬",
					// 	"phones": ["133 3333 3334", "133 3333 3335"]
					// }
				]
			}
		},
		onLoad() {
			//请求获取权限
			$contacts.needAuthorize((res) => {});
		},
		methods: {
			//显示联系人
			showContacts() {
				this.showData = !this.showData;
				
				$contacts.readContacts().then(res => {
					console.log('联系人',res);
					this.data_book = res;
					uni.setStorageSync('get_contacts',true);//获取成功的标识
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
	}
	
	.show-btn {
		margin-bottom: 20px;
		width: 200px;
	}
	
	.contacts-table {
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}
	
	.table-header {
		display: flex;
		background-color: #f5f5f5;
		font-weight: bold;
	}
	
	.table-row {
		display: flex;
		border-bottom: 1px solid #e0e0e0;
	}
	
	.table-row:last-child {
		border-bottom: none;
	}
	
	.header-cell, .body-cell {
		padding: 12px 15px;
	}
	
	.name-cell {
		width: 30%;
		border-right: 1px solid #e0e0e0;
	}
	
	.phone-cell {
		width: 70%;
	}
	
	.phone-item {
		padding: 4px 0;
	}
	
	.phone-item:not(:last-child) {
		border-bottom: 1px dashed #e0e0e0;
	}
</style>